
import * as echarts from '../../../../ec-canvas/echarts';
const systemInfo = wx.getSystemInfoSync();

Component({
  properties: {
  },

  data: {
    ec: {
      lazyLoad: true
    },
  },
  ready() {
  },
  pageLifetimes: {

  },
  methods: {

    countEcharts(data) {
      let mychart = this.selectComponent("#mychart-dom-bar");
      mychart.init((canvas, width, height) => {
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        Chart.setOption(this.getBarOption(data))
      })
    },

    // 配置bar
    getBarOption(data) {
      let xAxisData = [],
        yAxisData = [],
        seriesData = [],
        runstatus = data.runstatus
      
      for (let key in runstatus) {
        yAxisData.push(runstatus[key]);
      }


      data.result.forEach(item => {
        xAxisData.unshift(item.time)
        item.statItem != 'null' && seriesData.unshift(runstatus[item.statItem])
      })

      let seriesLine = {
          name: '运行趋势',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          itemStyle: {
            normal: {
              color: '#6AB4D4'
            }
          },
        }

      if (xAxisData.length || seriesData.length){
        Object.assign(seriesLine, {
            sampling: 'average',
            step: 'start',
          lineStyle: {
            color: {
              colorStops: [{
                offset: 0, color: '#6AB4D4' // 0% 处的颜色
              }, {
                offset: 1, color: '#6AB4D4' // 100% 处的颜色
              }],
            }
          },
          data: seriesData
        })
      }

      return {
        animation: true,
        legend: {
          data: ['运行趋势'],
          top: 0,
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          textStyle: {
            color: "#BAD7FF",
            fontSize: 9,
          }
        },
        tooltip: {
          triggerOn: 'none',
          position: function (pt) {
            return [pt[0], 130];
          }
        },
        xAxis: {
          type: 'category',
          name: '时间',
          nameGap: 5.5,
          splitLine: {
            show: false
          },
          data: xAxisData, 

          nameTextStyle: {
            color: "#BAD7FF",
            fontSize: 12,

          },
          axisLabel: {
            margin: 10,
            color: "#BAD7FF",
            fontSize: 9
          },
          axisLine: {
            lineStyle: {
              color: '#39529A'
            }
          }
        },
        yAxis: {
          type: 'category',
          name: '状态',
          nameGap: 8,
          boundaryGap: true,
          nameTextStyle: {
            color: "#BAD7FF",
            fontSize: 12,
          },
          axisTick: {
            inside: true,
            alignWithLabel: true,
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: "#BAD7FF",
            fontSize: 9,
            formatter(val){
              return val.split('').join('\n')
            }
          },
          z: 10,
          axisLine: {
            lineStyle: {
              color: '#39529A'
            }
          },
          data: yAxisData
        },
        grid: {
          top: 24,
          left: 50,
          right: 30,
          bottom: 26,
          height: systemInfo.windowWidth <= 360 && 85 || 110
        },
        dataZoom: [{
          type: 'inside',
          throttle: 50
        }],
        series: [
          seriesLine
        ],
      };
    },

  }
})